<template>
  <div class="shop-detail">
    <h1 class="shop-name">{{ shopInfo.shopName || '店铺名称未设置' }}</h1>
    <div class="shop-info">
      <p class="dynamic-text"><strong>店铺地址:</strong> {{ shopInfo.shopAddress || '未设置' }}</p>
      <p class="dynamic-text"><strong>店铺电话:</strong> {{ shopInfo.shopPhone || '未设置' }}</p>
      <p class="dynamic-text">
        <strong>店铺状态:</strong>
        <span :class="{'status-closed': shopInfo.isClosed, 'status-open': !shopInfo.isClosed}">
          {{ shopInfo.isClosed ? '已关闭' : '开放' }}
        </span>
      </p>
      <p class="dynamic-text"><strong>店铺描述:</strong> {{ shopInfo.shopDescription || '无' }}</p>
      <p class="dynamic-text"><strong>店铺评分:</strong> {{ shopInfo.shopIntegral || '未评分' }}</p>
      <p class="dynamic-text">
        <strong>营业时间:</strong>
        <span class="bold">{{ shopInfo.shopStartTime || '未设置' }} - {{ shopInfo.shopEndTime || '未设置' }}</span>
      </p>
      <div class="avatar-section">
        <strong>店铺头像:</strong>
        <el-tooltip content="点击更换头像">
          <img 
            :src="shopInfo.shopPoto || defaultAvatar" 
            alt="Shop Photo" 
            class="shop-image" 
            @click="selectFile" 
          />
        </el-tooltip>
        <input type="file" ref="fileInput" @change="uploadAvatar" style="display: none;" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultAvatar: 'https://daiyuanping888.oss-cn-chengdu.aliyuncs.com/ddf7a29d-eac9-4b2b-a3d2-595fc64246af.jpg',
      shopInfo: {},
    };
  },
  created() {
    this.findShopInfo();
  },
  methods: {
    selectFile() {
  this.$refs.fileInput.click();
},
uploadAvatar(event) {
  const file = event.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append("file", file);

    this.$http.post("/market/shopInfo/updateImage", formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(res => {
      if (res.data.code === 200) {
        this.$message.success("头像上传成功！");
      } else {
        this.$message.error("头像上传失败！");
      }
    }).catch(error => {
      this.$message.error("上传过程中出现错误！");
      console.error(error);
    });
  }
},
    findShopInfo() {
      this.$http.post("/market/shopInfo/getShopInfo").then(res => {
        this.shopInfo = res.data.data || {}; // 确保 shopInfo 是一个对象
      }).catch(error => {
        console.error('获取商店信息失败：', error);
        this.shopInfo = {}; // 如果出错，确保 shopInfo 为空对象
      });
    },
  },
};
</script>

<style scoped>
.shop-detail {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-width: 600px;
  margin: 20px auto;
  background-color: #f9f9f9; /* 设置浅色背景 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.shop-name {
  text-align: left;
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

.shop-info {
  margin-top: 15px;
  text-align: left; /* 左对齐 */
}

.dynamic-text {
  margin: 10px 0;
  transition: color 0.3s, font-weight 0.3s; /* 动态效果 */
}

.dynamic-text:hover {
  color: #007bff; /* 鼠标悬停时改变文本颜色 */
  font-weight: bold; /* 鼠标悬停时加粗 */
}

.status-open {
  color: green;
  font-weight: bold;
}

.status-closed {
  color: red;
  font-weight: bold;
}

.avatar-section {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 使头像右对齐 */
  margin-top: 15px;
}

.shop-image {
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 10px;
  transition: border-color 0.3s, transform 0.3s; /* 增加变换效果 */
}

.shop-image:hover {
  border-color: #007bff; /* 鼠标悬停时改变边框颜色 */
  transform: scale(1.05); /* 鼠标悬停时放大效果 */
}

.bold {
  font-weight: bold;
}
</style>